<template>
  <div class='page'>
    <!--<van-nav-bar :title='$t('m.header.category')' fixed />-->
    <div id='container' class='container flex'>
      <van-tabs ref='tab' sticky animated swipeable @click='onBar' @change='onChange'>
        <van-tab v-for='(menuItem, menuIndex) in menuList' :key='menuIndex' :title='menuItem.title'>
          <div v-if='!categoryList.length' class='none-wrap'>
            <p class='none'>
              暂无商品
            </p>
          </div>
          <div v-for='(categoryItem, categoryIndex) in categoryList' :key='categoryIndex'
               class='rightItem' @click='onDetail(categoryItem._id)'
          >
            <div class='category-item flex'>
              <div class='item flex detail-item'>
                <img v-lazy='categoryItem.imgCover' class='goods-img'>
                <div>
                  <p class='product_title'>
                    {{ categoryItem.title }}
                  </p>
                  <p class='product_price'>
                    ¥{{ categoryItem.priceNow }}
                  </p>
                  <van-icon name='cart-o' @click.stop='onAddCart(categoryItem)' />
                </div>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { dataMixin } from '@/mixins/dataMixin.js'
import { NavBar, Tab, Tabs, Toast, Icon } from 'vant'
import { mapActions, mapState } from 'vuex'

export default {
  metaInfo () {
    return {
      title: this.$t('m.meta.category.title'),
      meta: [
        {
          name: this.$t('m.meta.category.name'),
          content: this.$t('m.meta.category.content'),
        },
      ],
    }
  },
  data () {
    return {
      // menuList: [],
      // categoryList: [],
      pageNum: 0,
      type: '热门',
      ele: null,
      isClick: false,
    }
  },
  mixins: [dataMixin],
  components: {
    [NavBar.name]: NavBar,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Toast.name]: Toast,
    [Icon.name]: Icon,
  },
  computed: {
    ...mapState(['menuList', 'categoryList']),
  },
  activated () {
    console.log(444)
  },
  mounted () {
    this.getMenuList()
    this.getCategoryList({
      pageNum: this.pageNum,
      type: this.type,
    })
  },
  methods: {
    ...mapActions(['getMenuList', 'getCategoryList', 'addCart', 'setData']),
    onChange (index, title) {
      if (this.isClick) {
        this.isClick = false
        return
      }
      this.getCategoryList({
        pageNum: this.pageNum,
        type: title,
      })
    },
    onBar (index, title) {
      this.isClick = true
      this.type = title
      this.getCategoryList({
        pageNum: this.pageNum,
        type: title,
      })
    },
    onAddCart (item) {
      this.addCart({ id: item._id, This: this })
    },
    onDetail (id) {
      this.$router.push({
        path: '/detail',
        query: {
          id: id,
        },
      })
    },
  },
}
</script>
<style lang='scss' scoped>
.container {
  display: flex;
  align-items: flex-start;
}
.none-wrap {
  text-align: center;
  min-height: calc(100vh - 90px);
  width: 100%;
  background-color: #fff;
}
.none-wrap {
  text-align: center;
  height: 60px;
  line-height: 60px;
}
.page {
  :global(.van-tabs.fixed) {
  }
  :global(.van-tabs__content--animated) {
    min-height: calc(100vh - 90px);
  }
}
.van-tab__pane {
  padding-bottom: 52px;
}
.van-nav-bar {
  z-index: 1000 !important;
}
.category-item {
  border-bottom: 1px solid #ccc;
  height: 110px;
  width: 100%;
  background: white;
}
.goods-img {
  margin-right: 10px;
  width: 120px;
  height: 100px;
}
.product_price {
  margin: 10px 0;
}
.van-tabs--line {
  width: 100%;
}
</style>
